<template>
	<z-paging ref="paging" :refresher-out-rate="0.8" :show-empty-view-reload-when-error="false"
		:empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
		empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
		empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
		empty-view-error-text="暂无数据" safe-area-inset-bottom bg-color="#F5F8FE" v-model="dataList" @query="queryList">
		<view slot="top" class="topTabbar">
			<u-tabs :current="currentTab" :list="tabList" @change="tabChange" :scrollable="false"></u-tabs>
		</view>
		<view class="cellBox">
			<view class="detail" v-for="(item, index) in dataList" :key="index">
				<view v-if="currentTab == 0">
					<u-text :text="'张数：' + item.ledNumber" size="28rpx" color="#DCB210" />
					<u-line dashed color="#CCCCCC" v-if="currentTab !== 1" margin="14rpx 0 30rpx" />
				</view>
				<!-- 列表 -->
				<view class="list flex_wrap row_between row_middle"
					@click="currentTab === 2 ? to_claimedQuantity(item.ledId) :(currentTab === 0 ? to_detail(item.typeUse,item.ledId,item.countNum) : '' )">
					<view class="flex_wrap row_middle">
						<u-icon
							:name="currentTab === 1 || currentTab === 3 ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/25/d1b0920cb8414d31bd608935cc99838d.png' : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/25/c61f6633bd394bfba8c1ab7c545a3dee.png'"
							size="124rpx" />
						<view>
							<view class="flex_wrap row_between">
								<u-text :text="item.favorableTitle" size="32rpx" color="#FF3C3C " margin="0 16rpx" />
								<view class="receive">
									<u-text v-if="currentTab === 2" :text="'总数：' + item.ledTotal" size="28rpx"
										color="#333 " />
								</view>

							</view>

							<u-text text="无门槛" size="24rpx" color="#3D3D3D" margin="8rpx 16rpx" />
							<u-text :text="
									`有效期限至` +  $u.timeFormat(item.useTimeEnd, 'yyyy-mm-dd')" size="24rpx" color="#666 " margin="0 16rpx" />
						</view>
					</view>
					<view>
						<u-icon v-if="currentTab === 0"
							name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/10/87f38641d0a6454e8478b0f20c8398a7.png"
							size="112rpx" />
					</view>
				</view>
				<!-- 按钮部分||  -->
				<u-line dashed color="#CCCCCC" v-if="currentTab !== 1 || currentTab !== 3" />
				<view class="btnBox flex_wrap row_between row_middle">
					<u-text v-if="currentTab == 1 || currentTab == 3" :text="currentTab == 1 ? ('张数：' + item.logNumber) : ('张数：' + item.ledNumber)" size="28rpx" color="#DCB210" />
					<view class="flex_wrap row_right"  v-if="currentTab === 0">
						<view class="btnBox_btn1" @click="to_popup(item.ledTotal,item.ledId)">转发
						</view>
						<view class="btnBox_btn" @click="to_use(item.goodsIdSet,item.id,item.getId)">去使用</view>
					</view>
					<u-text v-if="currentTab === 2" :text="'分享时间：' + item.ledCreateTime" size="28rpx" color="#333" />
					<view class="claimedQuantity" v-if="currentTab === 2">已领：{{item.ledUseNumber}}</view>
				</view>
				<view class="cardbg">
					<u-image v-if="currentTab == 3" height="120rpx" width="120rpx"
						src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/25/a1f16be069e54881b63256794a5c186e.png"
						mode="aspectFill" radius="8rpx" />
					<u-image v-if="currentTab == 1" height="120rpx" width="120rpx"
						src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/26/ab82f2357931450684d92a6375af610f.png"
						mode="aspectFill" radius="8rpx" />
				</view>
				<view v-if="currentTab == 2 && (item.ledUseNumber < item.ledTotal)" class="cehuiBtn" @click="cehuiBtn(item.ledUniqueId)">撤回</view>
			</view>
		</view>
		<u-action-sheet :actions="actionList" @select="selectClick" :closeOnClickOverlay="true" :closeOnClickAction="true" @close="actionShow=false" :show="actionShow" cancelText="取消"></u-action-sheet>
		<u-modal :show="show" ref="editModal" title="转发数量" showCancelButton @confirm="confirmEdit" @cancel="cancelEdit"
			confirmColor="#1682FF">
			<view slot="default" style="width: 100%">
				<u--text text="转发数量" size="32rpx" color="#3D3D3D" lineHeight="80rpx"></u--text>
				<u--input type="number" placeholder="请输入转发数量" clearable v-model="couponNum" :customStyle="{
		                background: '#F7F7F7',
		                borderRadius: '16rpx 16rpx 16rpx 16rpx',
		                border: 'none',
		                height: '80rpx',
		            }" :placeholderStyle="{
		                fontSize: '28rpx',
		                color: '#F7F7F7',
		            }"></u--input>
				<u-gap height="32rpx" bgColor="#fff" v-if="btnType !== '3'" />
				<view class="flex_wrap row_between" v-if="btnType !== '3'">
				    <u--text text="用户限领取一张" color="#3D3D3D" size="32rpx" />
				    <view class="flex_wrap">
				        <u-switch
				            iconPlacement="right"
				            v-model="checkedOnline"
				            :activeValue="1"
				            :inactiveValue="0"
				        ></u-switch>
				    </view>
				</view>
			</view>
		</u-modal>
		
		<u-popup :show="qrShow" @close="qrShow =false" mode="center" closeable>
			<view class="qrBox">
				<u-image
					:src="baseSrc"
					width="320rpx" height="320rpx" mode="widthFix" />
				<u-text :color="btnType== '2' ? '#777' : '#588BF3'" size="28rpx" :text="btnType== '2' ? '长按二维码下载|分享' : '当面发扫码领券'" margin="36rpx 0 0" align="center" />
			</view>
		</u-popup>
	</z-paging>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		favorableList,
		favorableLog,
		getTransferList,
		cancelTransfer,
		transfer
	} from "@/api/coupon.js";
	import {
		getMiniCodeByAppId
	} from "@/api/order.js";
	import {
		numDiv
	} from "@/js_sdk/nl-precisionNum/precisionNum.js";
	import {
		formatDecimal
	} from "@/utils/index.js";
	export default {
		data() {
			return {
				appId: this.$appId,
				formatDecimal: formatDecimal,
				numDiv, //除
				tabList: [{
						name: "未使用",
						id: 0,
					},
					{
						name: "已使用",
						id: 1,
					},
					{
						name: "已分享",
						id: 2,
					},
					{
						name: "已过期",
						id: 3,
					},
				],
				show: false,
				currentTab: 0,
				dataList: [],
				couponNum: '',
				actionShow: false,
				actionList:[
					{
						type:'1',
						name:'转发微信'
					},
					{
						type:'2',
						name: '发朋友圈'
					},
					{
						type:'3',
						name: '当面发'
					}
				],
				btnType:'',
				checkedOnline: 0,
				qrShow:false,
				baseSrc:''
			};
		},
		computed: {
			...mapGetters(["isLogin", "phone"]),
		},
		methods: {
			cehuiBtn(ledUniqueId){
				const that = this;
				uni.showModal({
				    title: "",
				    content: "确定要撤回此优惠券吗？",
				    success({ confirm, cancel }) {
				        if (confirm) {
				            cancelTransfer(ledUniqueId).then((res) => {
				                uni.$u.toast("撤回成功！");
								that.$refs.paging.reload();
				            });
				        }
				    },
				});
			},
			to_claimedQuantity(ledId) {
				uni.$u.route({
					url: "/pages_coupon/receiveList/index",
					params: {
						favorableId: ledId,
					},
				});
			},
			to_detail(typeUse, ledId, countNum) {
				uni.$u.route({
					url: "/pages_coupon/detail/index",
					params: {
						typeUse: typeUse,
						countNum: countNum,
						ledId: ledId,
					},
				});
			},
			async queryList(pageNo, pageSize) {
				const that = this;
				const params1 = {
					pageNum: pageNo,
					pageSize: pageSize,
				};
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					status: this.currentTab == 0 ? '100' :'101',
				};
				let result;
				switch (this.currentTab) {
					case 0:
						result = await favorableList(params);
						break;
					case 1:
						result = await favorableLog(params1);
						break;
					case 2:
						result = await getTransferList(params1);
						break;
					case 3:
						result = await favorableList(params);
						break;
					default:
						result = await favorableList(params);
				}
				that.$refs.paging.completeByTotal(result.data.rows, result.data.total);
			},
			async tabChange(e) {
				this.currentTab = e.index;
				await this.$refs.paging.reload();
			},
			to_popup(ledTotal, ledId) {
				this.countNum = ledTotal
				this.ledId = ledId
				this.couponNum = "";
				this.actionShow = true
			},
			cancelEdit() {
				this.couponNum = "";
				this.show = false;
			},
			selectClick(e){
				this.btnType = e.type;
				console.log(this.btnType,'this.btnType>')
				this.show = true;
			},
			
			async confirmEdit() {
				console.log(this.btnType,this.checkedOnline,'this.checkedOnline>>')
				if (!this.couponNum) return uni.showToast({
					title: "请输入数量",
					icon: "none",
				});
				if (Number(this.couponNum) > Number(this.countNum)) return uni.showToast({
					title: "请输入正确数量",
					icon: "none",
				});
				this.show = false;
				if(this.btnType == 1){
					uni.$u.route({
						url: "/pages_coupon/myShare/index",
						params: {
							couponNum: this.couponNum,
							ledId: this.ledId,
							checkedOnline:this.checkedOnline
						},
					});
				}else if (this.btnType == 2){
					await transfer({
					   favorableLedId: this.ledId,
					   number: this.couponNum,
					   source: this.checkedOnline == 1 ? 3 : 2,
					})
					    .then(async (res) => {
					        this.receiveId = res.data
							const params = {
							   page: "pages_coupon/myShareReceive/index",
							   scene:this.receiveId,
							   env_version: __wxConfig.envVersion,
							   check_path: false,
							   appId: this.appId,
							};
							console.log(params,'params')
							getMiniCodeByAppId(params).then((res) => {
								if (res.code === 200 && res.data) {
								   var showImgData = res.data;
								   this.baseSrc = "data:image/png;base64," + showImgData;
								   this.qrShow = true
								}
							});
					    })
					    .catch((error) => {
					        uni.$u.toast(error);
					    });
				}else if(this.btnType == 3){
					await transfer({
					   favorableLedId: this.ledId,
					   number: this.couponNum,
					   source: 2,
					})
						.then(async (res) => {
							this.receiveId = res.data
							const params = {
							   page: "pages_coupon/myShareReceive/index",
							   scene:this.receiveId,
							   env_version: __wxConfig.envVersion,
							   check_path: false,
							   appId: this.appId,
							};
							console.log(params,'params')
							getMiniCodeByAppId(params).then((res) => {
								if (res.code === 200 && res.data) {
								   var showImgData = res.data;
								   this.baseSrc = "data:image/png;base64," + showImgData;
								   this.qrShow = true
								}
							});
						})
						.catch((error) => {
							uni.$u.toast(error);
						});
				}
			},
			to_use(goodsIdSet,id,getId) {
				const goodsIdSetList = goodsIdSet
				const goodIdList = goodsIdSetList.split(",");
				if (goodIdList.length > 1) {
					console.log(goodIdList,'列表')
					uni.$u.route({
						url: "/pages_coupon/goods/index",
						params: {
							favorableId: id,
							getId: getId,
						},
					});
					console.log(goodIdList,'列表11')
				} else {
					uni.$u.route({
						url: "/pages_shop1/goods/index",
						params: {
							id: goodIdList[0], //商品1638409733028499457
						},
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.receive {
		position: absolute;
		right: 0;
	}

	.topTabbar {
		background-color: #fff;
		padding-bottom: 16rpx;
	}

	::v-deep .u-tabs__wrapper__nav__item.data-v-48634e29 {
	    padding: 0;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    justify-content: center;
	}

	.cellBox {
		width: 92vw;
		margin: 0 auto;

		::v-deep .u-cell {
			box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
			margin-top: 32rpx;
			border-radius: 20upx;
		}

		.list {
			padding-bottom: 30rpx;
			position: relative;
		}

		.btnBox {
			height: 72rpx;

			&_btn {
				width: 142rpx;
				height: 52rpx;
				background: linear-gradient(90deg, #ff6e45 0%, #fe5037 100%);
				border-radius: 52rpx;
				text-align: center;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 52rpx;
			}

			&_btn1 {
				width: 142rpx;
				height: 52rpx;
				border: 2rpx solid #777777;
				border-radius: 52rpx;
				text-align: center;
				font-size: 28rpx;
				color: #777777;
				line-height: 52rpx;
				margin:0 24rpx 0 326rpx;
			}
		}
	}

	.detail {
		width: 100%;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-top: 32rpx;
		background: #ffffff;
		padding: 36rpx 32rpx 0;
		position: relative;
	}
	.cehuiBtn{
		position: absolute;
		right:56rpx;
		color: #fe5037;
		font-size: 34rpx;
		top:110rpx
	}

	.cardbg {
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
	}

	.claimedQuantity {
		font-size: 28rpx;
		color: #DCB210;
	}
	.qrBox{
			padding: 100rpx 60rpx 20rpx;
		}
</style>